﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>狼途汽车门店管理平台-登录</title>
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/js/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/js/Ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="/js/adminlte/css/AdminLTE.min.css">
    <link rel="stylesheet" href="/js/adminlte/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/js/adminlte/css/fonts.googleapis.com.css">

    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.js"></script>
    <script src="/js/adminlte/js/adminlte.min.js"></script>

    <link rel="stylesheet" href="/js/plugins/sweetalert2/sweetalert2.min.css">
    <script src="/js/plugins/sweetalert2/sweetalert2.min.js"></script>
    <script src="js/plugins/jquery-form/jquery.form.js"></script> <!--引入jQuery form插件-->


</head>
<body class="hold-transition login-page">
<div class="login-box">
    <div class="login-logo">
        <a href="http://www.wolfcode.cn"><b>狼途</b>汽车门店管理平台</a>
    </div>
    <div class="login-box-body">
        <p class="login-box-msg">请输入账号密码</p>

        <form method="post" action="/userlogin"  id="loginForm">
            <div class="form-group has-feedback">
                <input type="text" class="form-control" name="username" placeholder="请输入账号">
                <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" class="form-control" name="password" placeholder="请输入密码">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="row">
                <div class="col-xs-4">
                    <button type="button" class="btn btn-primary btn-block btn-flat submitBtn">登录</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    //正常使用JSON数据的方法提交表单
    /*$('.submitBtn').click(function () {
        let username = $('input[name=username]').val();
        let password = $('input[name=password]').val();
        $.post("/userlogin",{"username":username,"password":password},function (data) {
            if(data.success){
                //如果成功给出一个框提示
                Swal.fire(
                    '登录成功',
                    '',
                    'success'
                ).then((result) => {
                    if (result.value){
                        //跳转页面
                        window.location.href = "/employee/list";
                    }
                });
            }else {
                Swal.fire(
                    data.msg,
                    '',
                    'error'
                )
            }
        });
    });*/

    /*//使用jQuery的序列化的方法,可以一次性自动把表单的所有值取出并拼成字符串(xxx=xxx&xxx=xxx)
    $('.submitBtn').click(function () {
        //需要根据form的id值获取对象
        let para = $('#loginForm').serialize();
        $.post("/userlogin",para,function (data) {
            if(data.success){
                //如果成功给出一个框提示
                Swal.fire(
                    '登录成功',
                    '',
                    'success'
                ).then((result) => {
                    if (result.value){
                        //跳转页面
                        window.location.href = "/employee/list";
                    }
                });
            }else {
                Swal.fire(
                    data.msg,
                    '',
                    'error'
                )
            }
        });
    });*/

    //以上方法会使得form表单属性失效,如method,action enctype
    //所有上面的方法可以指定method,action,但是无法指定enctype,文件上传的时候必须使用enctype属性,
    //所有使用jQuery form插件,就是直接利用form表单里的属性,需要再这个页面引入这个插件
    //以下为提交按钮为button时绑定点击事件使用
    //如果按钮为submit,则不需要绑定事件$('.submitBtn').click(function () {}
    //然后把ajaxSubmit改为ajaxForm即可
    $('.submitBtn').click(function () {
        //获取表单标签对象,把表单升级为ajax,会根据form表单的属性去提交信息
        $('#loginForm').ajaxSubmit(function (data) {
            if(data.success){
                //如果成功给出一个框提示
                Swal.fire(
                    '登录成功',
                    '',
                    'success'
                ).then((result) => {
                    if (result.value){
                        //跳转页面
                        window.location.href = "/activity/list";
                    }
                });
            }else {
                Swal.fire(
                    data.msg,
                    '',
                    'error'
                )
            }
        });
    });
</script>

</body>
</html>
